import path from 'path'
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
// @ts-ignore
import eslintPlugin from 'vite-plugin-eslint'
import stylelitPlugin from 'vite-plugin-stylelint'
import { getProxyConfig } from './build/proxy'

export default defineConfig(({ mode }) => {
	const env = loadEnv(mode, `${process.cwd()}/env`, '')
	// 为什么要这样做，是为了process.env和mode一致性
	Object.assign(process.env, env, { NODE_ENV: mode })
	return {
		// env配置文件位置
		envDir: 'env',
		// env配置文件变量前缀
		envPrefix: 'TB_',
		plugins: [
			vue(),
			vueJsx(),
			AutoImport({
				imports: ['vue'],
				eslintrc: {
					enabled: true, // 是否自动生成 eslint 规则，建议生成之后设置 false
					filepath: './.eslintrc-auto-import.json', // 指定自动导入函数 eslint 规则的文件
				},
				resolvers: [
					// 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
					ElementPlusResolver(),
					// 自动导入图标组件
					IconsResolver({}),
				],
				vueTemplate: true, // 是否在 vue 模板中自动导入
				dts: path.resolve(path.resolve(__dirname), 'types', 'auto-imports.d.ts'), // 指定自动导入函数TS类型声明文件路径
			}),
			Components({
				resolvers: [
					ElementPlusResolver(),
					// 自动注册图标组件
					IconsResolver({
						enabledCollections: ['ep'], // element-plus图标库，其他图标库 https://icon-sets.iconify.design/
					}),
				],
				dts: path.resolve(path.resolve(__dirname), 'types', 'components.d.ts'), // 指定自动导入组件TS类型声明文件路径
			}),
			Icons({
				// 自动安装图标库
				autoInstall: true,
			}),
			createSvgIconsPlugin({
				// 指定需要缓存的图标文件夹
				iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
				// 指定symbolId格式
				symbolId: 'icon-[dir]-[name]',
			}),
			// 增加下面的配置项,这样在运行时就能检查eslint规范
			eslintPlugin(),
			stylelitPlugin(),
		],
		resolve: {
			alias: {
				'@': path.resolve(__dirname, 'src'),
			},
		},
		build: {
			minify: 'terser', // 必须开启：使用terserOptions 才有效果
			terserOptions: {
				compress: {
					drop_console: process.env.NODE_ENV === 'production', // 也可直接使用mode进行判断
					drop_debugger: process.env.NODE_ENV === 'production',
				},
			},
		},
		css: {
			// CSS 预处理器
			preprocessorOptions: {
				// define global scss variable
				scss: {
					javascriptEnabled: true,
					additionalData: '@use "@/assets/css/variables.scss" as *;',
				},
			},
		},
		server: {
			// host设置为true才可以使用network的形式，以ip访问项目
			host: true,
			// 本地编译后访问的端口号
			port: 8082,
			// 编译后是否自动发开浏览器
			open: true,
			hmr: {
				overlay: false,
			},
			// 跨域设置允许
			// cors: false,
			// 端口已占用直接退出
			strictPort: false,
			// 设置代理
			proxy: getProxyConfig(),
		},
	}
})
